<template>
	<view class="u-p-l-40 u-p-r-40 wrap">
			<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item 
				:leftIconStyle="{color: '#888', fontSize: '32rpx'}" 
				left-icon="" 
				label-width="120" 
				:label-position="labelPosition" 
				label="昵称" 
				prop="nickName">
					<u-input 
					:border="border" 
					placeholder="请输入昵称" 
					v-model="model.nickName" 
					type="text"></u-input>
				</u-form-item>
				
				
				<view @click="phoneClick">
					<u-form-item  
					
					:label-position="labelPosition" 
					label="手机号码" 
					prop="tel" 
					label-width="150">
						<input 
						
						placeholder="请输入手机号" 
						v-model="model.tel" 
						:disabled="true"
						style="font-size: 28rpx;"
						type="number"></input>
					</u-form-item>
				</view>
				<u-form-item
				:leftIconStyle="{color: '#888', fontSize: '32rpx'}" 
				left-icon="" 
				label-width="120" 
				:label-position="labelPosition" 
				label="邮箱" 
				prop="email">
					<u-input 
					:border="border" 
					placeholder="请输入邮箱" 
					v-model="model.email" 
					type="text"></u-input>
				</u-form-item>
			</u-form>
			<u-button @click="submit">保存</u-button>
		</view>
</template>

<script>
	export default {
		data() {
			let that = this;
			return {
				model: {
					nickName: '',
					email: '',
					tel: '',
					code: '',

					remember: false,
					
				},
				rules: {
					email: [
						{
							min: 5,
							max: 20,
							message: '邮箱长度要在5到20个字符',
							trigger: ['change','blur'],
						},{
							// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.email(value);
							},
							message: '请填写正确邮箱',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					nickName: [
						{
							required: true,
							message: '请输入昵称',
							trigger: 'blur' ,
						},
						{
							min: 2,
							max: 10,
							message: '姓名长度在2到10个字符',
							trigger: ['change','blur'],
						},
						// {
						// 	// 此为同步验证，可以直接返回true或者false，如果是异步验证，稍微不同，见下方说明
						// 	validator: (rule, value, callback) => {
						// 		// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
						// 		return this.$u.test.chinese(value);
						// 	},
						// 	message: '姓名必须为中文',
						// 	// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						// 	trigger: ['change','blur'],
						// },
					],
					tel: [
						{
							required: true,
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change，二者之间用英文逗号隔开
							trigger: ['change','blur'],
						}
					],
					
					
					
				},
				border: false,
				check: false,
				selectStatus: 'close',
				
				
				actionSheetShow: false,
				pickerShow: false,
				selectShow: false,
				
				radioCheckWrap: false,
				labelPosition: 'left',
				codeTips: '',
				errorType: ['message'],
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
			this.model.nickName = this.vuex_user.nickName
			this.model.email = this.vuex_user.email
			this.model.tel = this.vuex_user.tel
		},
		methods: {
			phoneClick(){
				this.$u.toast("手机号不能修改绑定哟")
			},
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						//更新用户信息  
						await this.$u.api.userInfoUpdate(this.vuex_user.id,this.model)
						//更新用户信息 刷新缓存 vuxe_user
						this.$u.utils.updateUser()
						
						console.log('验证通过');
						this.$u.toast('更新成功')
					} else {
						console.log('验证失败');
						this.$u.toast('更新失败')
					}
				});
			},
			
			
			
			
		
			
			borderChange(index) {
				this.border = !index;
			},

			labelPositionChange(index) {
				this.labelPosition = index == 0 ? 'left' : 'top';
			},
			codeChange(text) {
				this.codeTips = text;
			},
			
			
			errorChange(index) {
				if(index == 0) this.errorType = ['message'];
				if(index == 1) this.errorType = ['toast'];
				if(index == 2) this.errorType = ['border-bottom'];
				if(index == 3) this.errorType = ['border'];
			}
		},
		
	}
</script>

<style lang="scss" scoped>

</style>
